<template>
  <div class="all">
    
      <div class="step">
        <el-steps :active="active" finish-status="success" align-center>
          <el-step title="填写商品信息" />
          <el-step title="填写商品促销" />
          <el-step title="填写商品属性" />
          <el-step title="选择商品关联" />
        </el-steps>
      </div>
      <div class="add-one" v-if="active === 0">
      <el-form label-width="100px" style="max-width: 720px" ref="ruleFormRef"  :model="ruleForm_one"  :rules="rules">
        <el-form-item label="商品分类" prop="protype">
          
        <el-cascader v-model="ruleForm_two.youhui" :options="ruleForm_one.protype" placeholder="请选择" />
       
        </el-form-item>
        <el-form-item label="商品名称" prop="proname">
          <el-input v-model="ruleForm_one.proname"></el-input>
        </el-form-item>
        <el-form-item label="副标题" prop="prosubtitle">
          <el-input v-model="ruleForm_one.prosubtitle"></el-input>
        </el-form-item>
        <el-form-item label="商品品牌" prop="prologo">
          
          <el-select v-model="ruleForm_one.prologo" placeholder="请选择品牌">
        <el-option :label="item.name" value="prologovalue" v-for="item in proLogoList"/>
        
      </el-select>
        </el-form-item>
        <el-form-item label="商品货号" >
          <el-input v-model="ruleForm_one.prohuohao" />
        </el-form-item> 
        <el-form-item label="商品售价" >
          <el-input v-model="ruleForm_one.proshoujia" />
        </el-form-item>
        <el-form-item label="市场价" >
          <el-input  v-model="ruleForm_one.proshichangjia"/>
        </el-form-item>
        <el-form-item label="商品库存" >
          <el-input v-model="ruleForm_one.prokucun" />
        </el-form-item>
        <el-form-item label="计量单位" props="prodanwei">
          <el-input v-model="ruleForm_one.projiliangdanwei" />
        </el-form-item>
        <el-form-item label="商品重量" props="priweight">
          <el-input v-model="ruleForm_one.prozhongliang"/>
        </el-form-item>
        <el-form-item label="排序" props="pripaixud">
          <el-input v-model="ruleForm_one.propaixu"/>
        </el-form-item>


      </el-form>
      <div class="button">
        <el-button type="primary" @click="submitForm_one(ruleFormRef)">
          下一步，填写商品促销
        </el-button>
      </div>
    </div>
    <div class="add-two" v-if="active === 1">
      <div>
        <el-form label-width="100px" style="max-width: 720px" ref="ruleFormRef" :model="ruleForm_two" >
        <el-form-item label="赠送积分" >
          <el-input v-model="ruleForm_two.songfen"></el-input>
        </el-form-item>
        <el-form-item label="赠送成长值" >
          <el-input v-model="ruleForm_two.songchengzhangzhi"></el-input>
        </el-form-item>
        <el-form-item label="积分购买限制" >
          <el-input v-model="ruleForm_two.xianzhi"></el-input>
        </el-form-item>
        <el-form-item label="预告商品" >
              <template >
                    <el-switch />
                </template>
        </el-form-item>
        <el-form-item label="商品上架"  >
          <template #default="{ row }">
                    <el-switch  v-model="ruleForm_two.shangjia" />
                </template>
        </el-form-item>
        <el-form-item label="商品推荐"  >
          <template #default="{ row }">
                  新品 &nbsp; <el-switch  v-model="ruleForm_two.xinpin" />
                  推荐 &nbsp;<el-switch v-model="ruleForm_two.tuijian" />
                </template>
        </el-form-item>
        <el-form-item label="服务保证">
      <el-checkbox-group v-model="ruleForm_two.fuwu" >
        <el-checkbox label="无忧退货" name="type"  />
        <el-checkbox label="快速退款" name="type" />
        <el-checkbox label="免费包邮" name="type" />
      </el-checkbox-group>
    </el-form-item>
        <el-form-item label="详细页标题：" >
          <el-input  v-model="ruleForm_two.xiangxititle" />
        </el-form-item>
        <el-form-item label="详细页描述" props="prodanwei">
          <el-input  v-model="ruleForm_two.xiangximiaoshu" />
        </el-form-item>
        <el-form-item label="商品关键字" props="proweight">
          <el-input   v-model="ruleForm_two.productkey" />
        </el-form-item>
        <el-form-item label="商品备注：" props="propaixud">
          <el-input  v-model="ruleForm_two.beizhu" />
        </el-form-item>
        <el-form-item label="选择优惠方式" >
          <div>
    <el-radio-group v-model="ruleForm_two.youhui" size="default" @change="youhuichange">
      <el-radio-button label="无优惠" />
      <el-radio-button label="特惠促销" />
      <el-radio-button label="会员价格" />
      <el-radio-button label="阶梯价格" />
      <el-radio-button label="满减价格" />
    </el-radio-group>
  </div>
  <div class="youhui_item">
    <div class="youhui_one" v-show="ruleForm_two.huidiaoyouhui==='无优惠'">
      
    </div>
    <div class="youhui_two" v-show="ruleForm_two.huidiaoyouhui==='特惠促销'">
      <el-form label-width="100px" style="max-width: 720px"  :model="tehuicuxiao_item"> 
      <el-form-item label="开始时间：" >  
        <el-date-picker
        v-model="tehuicuxiao_item.beginTime"
        type="date"
        placeholder="请选择开始时间"
        size="default"
      />
    </el-form-item> 
    <el-form-item label="结合时间：" >  
        <el-date-picker
        v-model="tehuicuxiao_item.endTime"
        type="date"
        placeholder="请选择结束时间"
        size="default"
      />
    </el-form-item> 
    <el-form-item label="促销价格:"  >  
        <el-input placeholder="请输入促销价格" v-model="tehuicuxiao_item.cuxiaojiage"></el-input>
    </el-form-item> 
    </el-form>
    
    </div>
    <div class="youhui_three" v-show="ruleForm_two.huidiaoyouhui==='会员价格'">
      <el-form label-width="100px" style="max-width: 720px"  :model="huiyuanjiage_item">
        <el-form-item label="黄金会员">
          <el-input  v-model="huiyuanjiage_item.huangjin"></el-input>
        </el-form-item>
        <el-form-item label="白金会员">
          <el-input  v-model="huiyuanjiage_item.baijin"></el-input>
        </el-form-item>
        <el-form-item label="钻石会员">
          <el-input  v-model="huiyuanjiage_item.zuanshi"></el-input>
        </el-form-item>
        
       

    </el-form>
    
    </div>
    <div class="youhui_four" v-show="ruleForm_two.huidiaoyouhui==='阶梯价格'">
    
    
      <el-table :data="jietijiage_item" style="width: 100%" border table-layout="auto">
    <el-table-column label="数量">
     <template #default="scope">
      <el-input v-model="scope.row.shuliang"></el-input>
     </template>
    </el-table-column>
    <el-table-column label="折扣">
      <template #default="scope">
        <el-input v-model="scope.row.zhekou"></el-input>
     </template>
    </el-table-column>
      <el-table-column label="操作" width="240">
                <template #default="{row}">
                    <el-button text type="primary" >删除</el-button>
                    <el-button text type="primary">添加</el-button>
                </template>
            </el-table-column>
            
  </el-table>
    
    </div>
    <div class="youhui_five" v-show="ruleForm_two.huidiaoyouhui==='满减价格'">
      <el-table :data="manjianjiage_item" style="width: 100%" border table-layout="auto">
    <el-table-column label="减">
     <template #default="scope">
      <el-input v-model="scope.row.jian"></el-input>
     </template>
    </el-table-column>
    <el-table-column label="立减">
      <template #default="scope">
        <el-input v-model="scope.row.lijian"></el-input>
     </template>
    </el-table-column>
      <el-table-column label="操作" width="240">
           
                <template #default="{row}">
                  
                    <el-button text type="primary" >删除</el-button>
                    <el-button text type="primary">添加</el-button>
                </template>
            </el-table-column>
            
  </el-table>
    </div>
  </div>
        </el-form-item>
      </el-form>

      </div>
      <div class="button">
        <el-button type="primary" @click="active--">上一步，填写商品信息 </el-button>
        <el-button type="primary" @click="next">下一步，填写商品属性 </el-button>
        
      </div>
    </div>
    <div class="add-three" v-if="active === 2">
      <div>
        <el-form label-width="100px" style="max-width: 720px" ref="ruleFormRef" :model="ruleForm_three" >
          <el-form-item label="属性类型">
          
            <el-select v-model="ruleForm_three.selectValue" class="m-2" placeholder="Select" size="large" @change="ProductPropertyChange">
            <el-option
              v-for="item in ProductPropertyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
            </el-select>
            

            
          </el-form-item>
          <el-form-item label="商品规格">
          <el-card class="box-card">
            <div v-for="item in ruleForm_three.ProPropertyList" :key="item" class="text item">
              <div>{{ item.name +':'}}</div>
              <div v-if="item.handAddStatus===1"><el-input style="width:200px" v-model="proguigeinp"></el-input> <el-button>增加</el-button> </div>
              <div v-if="item.handAddStatus===0"> <el-checkbox v-model="proCheck"  size="large" /> </div>
          </div>
          </el-card>
          <el-table :data="ruleForm_three.ProPropertyList" style="width: 100%" border empty-text="暂无数据">
            <el-table-column v-for="item in ruleForm_three.ProPropertyList" :prop="item.name" :label="item.name" width="180" />
            <el-table-column prop="date" label="销售价格" width="180" />
        <el-table-column  label="商品库存" width="180" />
        <el-table-column label="库存预警值" />
        <el-table-column  label="SKU编号" />
        <el-table-column label="操作" />
              </el-table>

          <el-button type="primary">刷新列表</el-button>
          <el-button type="primary">同步价格</el-button>
          <el-button type="primary">同步库存</el-button>

          
  </el-form-item>
  <el-form-item label="商品参数" >
   <el-card>

    <div v-for="item,index in ruleForm_three.ProQueryList" :key="item.id" class="canshuCard">
      <div class="card">
        {{ item.name+':' }}
      </div>
    <el-input v-model="item.inputList" @change="qq(index)"></el-input>
    
    </div>
   </el-card>
  </el-form-item>


  <el-form-item label="商品相册">
    <el-upload
    class="avatar-uploader"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>


  </el-form-item>
  <el-form-item label="规格参数">
    <el-tabs
    v-model="mode"
    type="card"
  >
    <el-tab-pane label="电脑端详情" name="computer">
      <TEditor ref="editor" v-model="formState.computercontents"  @getContent="getcomputerContent"/>
    </el-tab-pane>
    <el-tab-pane label="移动端详情" name="mobile">
      <TEditor ref="editor" v-model="formState.mobilecontents"  @getContent="getmobileContent"/>
    </el-tab-pane>
  </el-tabs>

  </el-form-item>
        </el-form>
      </div >
      <div class="button">
        <el-button type="primary" @click="active--">上一步，填写商品信息 </el-button>
      <el-button type="primary" @click="next">下一步，选择商品关联 </el-button>
      </div>
    </div>
    <div class="add-four" v-if="active === 3">
      
       <el-form>
        <el-form-item label='关联专题' style="width:700px">
          <el-transfer v-model="productSubjectvalue" :data="productSubjectList" :titles="['待选择', '已选择']"  filterable filter-placeholder="请输入专题名称"/>
        </el-form-item>
        <el-form-item label='关联优选' style="width:700px">
          <el-transfer v-model="productGoodSelectvalue" :data="productGoodSelectList" :titles="['待选择', '已选择']"  filterable filter-placeholder="请输入专题名称"/>
        </el-form-item>
        
       </el-form>


      
    <div class="button">
      <el-button type="primary" @click="active--">上一步，填写商品属性 </el-button>
      <el-button type="primary" @click="next">完成，提交商品 </el-button>
    </div>
    </div>
  </div>

</template>
  
<script lang="ts" setup>
import { FormInstance } from 'element-plus';
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { selectProductTypeListApi,selectProductPropertyListApi ,selectProductListPropertyByIdApi,getProductSubjectListApi,getProductGoodSelectListApi,getProductLogoListApi} from './lzw-api/index';
import type { UploadProps } from 'element-plus'
import TEditor from '@/components/TEditor.vue';

// 以下为第四个页面

interface Option {
  key: number
  label: string
  disabled: boolean
}


const productSubjectList = ref<Option[]>([])
const productSubjectvalue = ref([])


const productGoodSelectList=ref<Option[]>([])
  const productGoodSelectvalue = ref([])
 




//以下为第三个页面


// 此为富文本编辑器
const formState = reactive({computercontents :'',mobilecontents:''})
const getcomputerContent = (v: string) => {
  formState.computercontents = v
}
const getmobileContent = (v: string) => {
  formState.mobilecontents = v
}




//此为选择框响应式数据
const ProductPropertyList = ref<{ value: number, label: string ,name:string ,id:number}[]>([])

// 商品规模小列表数据
const proguigeinp=ref('')
const proCheck=ref(false)


// 此为上传图片相册数据
const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

// 此为参数页面
const mode = ref('computer')

//此为总表格数据
const ruleForm_three=reactive<any>({
  selectValue:'',
  ProPropertyList:[],
  ProQueryList:[],
})

// 选择框改变时触发事件
const ProductPropertyChange=(e:any)=>{
  // console.log(ProductPropertyList.value);

 const gg:any= ProductPropertyList.value.find((item)=>{
   return item.value===e
  })
  // console.log(gg);
  selectProductListPropertyByIdApi({
    cid:gg.id,
    type:0,
    pageNum:1,
    pageSize:100
  }).then((res:any):any=>{
    if(res.code===200){
      // console.log(1);
      ruleForm_three.ProPropertyList=res.data.list
      
    }
    // console.log(ruleForm_three.ProPropertyList);
    
  })

  selectProductListPropertyByIdApi({
    cid:gg.id,
    type:1,
    pageNum:1,
    pageSize:5
  }).then((res:any)=>{
    if(res.code===200){
      ruleForm_three.ProQueryList=res.data.list
      
    }
    // console.log(ruleForm_three.ProQueryList);
    
  })
  
}
// 输入框改变时的input框事件
const qq=(i:any)=>{
  console.log(ruleForm_three.ProQueryList[i].inputList);
  
}

//以下为第二个页面
const youhuichange=(e:any)=>{
  // console.log(e);
  ruleForm_two.huidiaoyouhui=e
  // console.log(ruleForm_two.huidiaoyouhui);
  
}
//此为第二个页面表单数据
const ruleForm_two = reactive({
  songfen:'',
  songchengzhangzhi:'',
  xianzhi:'',
  yugao:'',
  shangjia:false,
  xinpin:false,
  tuijian:false,
  fuwu:[],
  xiangxititle:'',
  xiangximiaoshu:'',
  productkey:'',
  beizhu:'',
  youhui:'无优惠',
  huidiaoyouhui:""
})
//此为优惠小表单数据

const tehuicuxiao_item=reactive({
  beginTime:'',
  endTime:'',
  cuxiaojiage:''
})


const huiyuanjiage_item=reactive({
  huangjin:'',
  baijin:'',
  zuanshi:''
})

const jietijiage_item=reactive([{
    shuliang:0,
    zhekou:0
},
{
    shuliang:0,
    zhekou:0
},
{
    shuliang:0,
    zhekou:0
},
{
    shuliang:0,
    zhekou:0
},
])

const manjianjiage_item=reactive([{
    jian:0,
    lijian:0
},
{
    jian:0,
    lijian:0
},
{
    jian:0,
    lijian:0
},
{
    jian:0,
    lijian:0
},
])



//以下为第一个页面
const ruleFormRef = ref<FormInstance>()


const ruleForm_one = reactive({
protype:[],
proname:'',
prosubtitle:'',
prologo:'',
prohuohao:'',
proshoujia:'',
proshichangjia:'',
prokucun:'',
projiliangdanwei:'',
prozhongliang:'',
propaixu:'',
})

// 此为选择品牌时绑定的值

const proLogoList=ref<any>([])


const rules = reactive({
  protype: [{ required: true, trigger: "blur", message: "请填写用户名" }],
    proname: [{ required: true, trigger: "blur", message: "请填写商品名称" }],
    prosubtitle: [{ required: true,message: "请填写副标题", trigger: 'blur' },],
    prologo: [{ required: true, message: "请填写商品品牌", trigger: 'blur' },],
    

})

const submitForm_one = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      if (active.value++ > 2) active.value = 0
    } else {
      console.log('error submit!', fields)
    }
  })
}


onMounted(() => {

  // 此为第一个页面的发请求：获取商品分类列表
  selectProductTypeListApi().then((res:any)=>{
      if(res.code===200){
          // console.log(res.data);
       
          ruleForm_one.protype=res.data.map((item: any)=>({
            value:item.name,
            label:item.name,
           children: item.children.map((chi:any)=>({
            value:chi.name,
            label: chi.name,
           }))
          }))
          
      }
   })
  //  此为第一个页面的发请求:后去商品品牌列表
  getProductLogoListApi().then((res:any)=>{
    if(res.code===200){
      // console.log(res);
      proLogoList.value=res.data
      
    }

    console.log(proLogoList.value);
    
  })
   // 此为第三个页面的发请求：获取商品属性列表
   selectProductPropertyListApi().then((res:any)=>{
    // console.log(res);
    if(res.code===200){
     ProductPropertyList.value=res.data.map((item:any)=>({
      value:item.name,
      label:item.name,
      id:item.id
     }))
    }
    // console.log(res.data);
    // console.log(ProductPropertyList.value);
   })
 // 此为第三个页面的发请求：获取商品参数列表
   getProductSubjectListApi().then((res:any)=>{
    if(res.code===200){
      // console.log(res);
      productSubjectList.value=res.data.map((item:any)=>({
        key:item.id,
        label:item.title,
        disabled:false
      }))
      
    }
    // console.log(productSubjectList.value);
    
   })
   // 此为第四个页面的发请求：获取商品优选列表列表
   getProductGoodSelectListApi().then((res:any)=>{
    // console.log(res);
    if(res.code===200){
      productGoodSelectList.value=res.data.map((item:any)=>({
        key:item.id,
        label:item.name,
        disabled:false
      }))
    }
    console.log(productGoodSelectList.value);
   })


})


//此为控制步骤条的方法
const active = ref(0)
const next = () => {
  if (active.value++ > 2) active.value = 0
}

</script>

<style lang="less" scoped>
.all {
  border: 1px solid rgba(0, 0, 0, .1);
  width: 850px;
  margin: 0 auto;
  
    .step {
      margin: 20px 40px;

      //    font-size: 12px;
      :deep(.el-step__title) {
        font-size: 12px;
      }
    }
  .add-one {
    :deep(.el-form) {
      margin: 0 auto;
    }
    :deep(.el-input){
    width: 400px;
  }
    .button {
      text-align: center;
    }
  }
  .add-two{
    :deep(.el-form) {
      margin: 0 auto;
    }
    :deep(.el-radio-group){
      width: 500px;
    }
    
    .button {
      text-align: center;
    }
  }

  .add-three{
    :deep(.el-form) {
      :deep(.el-input){
    width: 400px;
  }
      margin: 0 auto;
      .avatar-uploader .el-upload {
  border: 1px dashed #000;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
//  transition: all;
}
      .avatar-uploader .el-upload:hover {
  border-color: red ;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
    } 
    .box-card {
    width: 600px;
  }
    .button {
      text-align: center;
    }
    .canshuCard{
      display: flex;
      justify-content: center;
      .card{
        width: 150px;
      }
    }
    


  }
  .add-four {
    :deep(.el-form) {
      margin: 0 auto;
      padding-left: 7vw;
    }

    .button {
      text-align: center;
    }
  }
}
</style>